<script setup>
import FormTool from '@/components/formtool/FormTool.vue';
import BpmnDesigner from '@/components/process/BpmnDesigner.vue';
import SystemInfo from './components/SystemInfo.vue'
import { ref, inject } from 'vue'
// import { ElMessageBox } from 'element-plus';
const activepage = ref(1)
const isDrawerVisiable = defineModel("isDrawerVisiable", {
  type: Boolean,
  default: true
})
const customForm = defineModel("customForm", {
  type: Object,
  default: {
    formKey: '',
    formContent: {
      "controls": [],
      "props": {
        "labelPosition": "right",
        "labelWidth": 100,
        "size": "default",
        "customClass": "",
        "cols": 12
      }
    },
  }
})
const customXml = defineModel("customXml", {
  type: String,
  default: ''
})
const sysInfo = defineModel("sysInfo", {
  type: Object,
  default: {
    id: '',
    processName: '',
    formId: '',
    flowId: '',
    appName: '',
    remark: ''
  }
})

// const customForm = ref({
//   // formName: '',
//   formKey: '',
//   formContent: {
//     "controls": [],
//     "props": {
//       "labelPosition": "right",
//       "labelWidth": 100,
//       "size": "default",
//       "customClass": "",
//       "cols": 12
//     }
//   },
// })
// const customXml = ref('')

function closeDrawer() {
  ElMessageBox.confirm('关闭编辑页将丢失配置数据，要继续吗？', 'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
    .then(() => {
      isDrawerVisiable.value = false
      customForm.value.formContent = {
        "controls": [],
        "props": {
          "labelPosition": "right",
          "labelWidth": 100,
          "size": "default",
          "customClass": "",
          "cols": 12
        }
      }
      customXml.value = ''
      activepage.value = 1
    })
}

// 上传流程
import { saveXml } from '@/api/flowable/defination'
import { uploadForm, addFormFlow, updateFormFlow } from '@/api/flowable/form'
import { ElMessage } from 'element-plus';
const isEditFlag = inject('isEditFlag')
const emits = defineEmits(['doGetAllFormFlow'])
// 上传表单和流程数据，防止后期拆分表单和流程页面，通过三个接口进行更新
async function submitProcess() {
  let formFlow = {
    id: sysInfo.value.id,
    processName: sysInfo.value.processName,
    formId: '',
    flowId: '',
    remark: sysInfo.value.remark,
    appName: sysInfo.value.appName
  }
  console.log(formFlow)
  // 上传表单
  await uploadForm({
    name: sysInfo.value.processName,
    key: customForm.value.formKey,
    formContent: JSON.stringify(customForm.value.formContent)
  }).then((res) => {
    console.log(res)
    formFlow.formId = res.data.data
  })
  // 上传流程
  await saveXml({
    name: sysInfo.value.processName,
    category: sysInfo.value.appName,
    xml: customXml.value,
  }).then((res) => {
    console.log(res)
    formFlow.flowId = res.data.data
  })
  if (!isEditFlag) {
    await addFormFlow(formFlow)
      .then((res) => {
        ElMessage.success(res.data.data)
      })
  } else {
    // 更新表单和流程数据
    await updateFormFlow(formFlow).then((res) => {
      console.log('update:', res)
    })
  }

  isDrawerVisiable.value = false
  customForm.value.formContent = {
    "controls": [],
    "props": {
      "labelPosition": "right",
      "labelWidth": 100,
      "size": "default",
      "customClass": "",
      "cols": 12
    }
  }
  customXml.value = ''
  activepage.value = 1
  emits('doGetAllFormFlow')
}

</script>

<template>
  <div class="container">
    <el-row style="height: 50px; background-color: var(--el-color-primary-light-9);">
      <div class="steps">
        <el-steps style="width: 700px; background-color: transparent; " :active="activepage" simple>
          <el-step title="创建表单" />
          <el-step title="创建流程图" />
          <el-step title="系统分配" />
        </el-steps>
        <div class="control">
          <el-button type="primary" @click="activepage--" :disabled="activepage === 1">上一步</el-button>
          <el-button type="success" @click="activepage++" v-if="activepage !== 3">下一步</el-button>
          <el-button type="success" @click="activepage++" v-if="activepage === 3">保存</el-button>
        </div>
        <el-button class="close" type="danger" @click="closeDrawer">关闭编辑页面</el-button>
      </div>
    </el-row>
    <el-row class="step-content">
      <FormTool v-if="activepage === 1" v-model:customForm="customForm"></FormTool>
      <BpmnDesigner v-if="activepage === 2" :customForm="customForm" v-model:customXml="customXml"></BpmnDesigner>
      <SystemInfo v-if="activepage === 3" @submit="submitProcess" v-model:sysInfo="sysInfo"></SystemInfo>
    </el-row>

  </div>


</template>

<style scoped lang="less">
.container {
  width: calc(100vw - 60px);
  height: calc(100vh - 40px);
  overflow: hidden;
  border: 1px solid var(--el-color-info-light-7);
  border-radius: 5px;

  .steps {
    display: flex;
    align-items: center;
    // width: 80%;
    margin: 0 auto;
  }

  .control {
    display: flex;

    .el-button {
      margin: 0 10px;
    }
  }

  .close {
    margin-left: 50px;
  }

  .step-content {
    height: calc(100vh - 110px);
  }
}
</style>
